<template>
  <div class="footer">
    <div class="item">
      <router-link to="/home" class="navItem" active-class="active">
        <i class="iconfont icon-cedaohang_shouye">首页</i>
      </router-link>
    </div>
    <div class="item">
      <router-link to="/cart" class="navItem" active-class="active">
        <i class="iconfont icon-gouwuche">购物车</i>
      </router-link>
    </div>
    <div class="item">
      <router-link to="/order" class="navItem" active-class="active">
        <i class="iconfont icon-icon-wodedingdan">订单</i>
      </router-link>
    </div>
    <div class="item">
      <router-link to="/center" class="navItem" active-class="active">
        <i class="iconfont icon-icon-wodexinxi">我的</i>
      </router-link>
    </div>
  </div>
</template>

<script setup></script>

<style scoped lang="less">
.footer {
  background-color: #fff;
  border-top: 0.5px solid #eee;
  display: flex;
  .item {
    flex: 1;
    .navItem {
      display: flex;
      flex: 1;
      flex-flow: column;
      align-items: center;
      ::before {
        display: flex;
        flex-flow: column;
        align-items: center;
        font-size: 50px;
      }
  
    }
  }
}
.active{
  color: #ffc400;
}
</style>
